<template>
	<view>
		<view class="change">
			<view class="title">修改昵称</view>
			<input type="text" v-model="nick" maxlength='10' placeholder="请输入新昵称" placeholder-class="placeholder"/>
		</view>
		<view class="btn">
			<button type="default" :style="btnStyle" @click="save">确认修改</button>
		</view>
	</view>
</template>

<script>
	import { updateNurses} from '@/apis/nurse/index.js'
	export default {
		data() {
			return {
				nick:''
			}
		},
		onLoad() {
			// this.nick = this.$store.state.userInfo.nick
		},
		onShow() {
			// this.nick = this.$store.state.userInfo.nick
		},
		computed:{
			btnStyle(){
				if(this.nick){
					return `background:#3C8EFF`
				}
			}
		},
		methods: {
			save(){
				let _this = this
				if(this.nick){
					uni.showModal({
						title:'确认修改昵称',
						success: function (res) {
							if (res.confirm) {
								_this.change()
								console.log('1111111')
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					})
				}else{
					plus.nativeUI.toast('请输入要修改的昵称')
					// uni.showToast({
					// 	icon:'none',
					// 	title:'请输入要修改的昵称'
					// })
				}
			},
			async change(){
				let userInfo = this.$store.state.userInfo
				let res =await updateNurses({nick:this.nick})
				if(res.success){
					plus.nativeUI.toast('修改成功~')
					// uni.showToast({
					// 	icon:'none',
					// 	title:'修改成功~'
					// })
					userInfo.nick = this.nick
					this.$store.commit('setUserInfo',userInfo)
					setTimeout(()=>{
						uni.navigateBack({
							delta:2
						})
					},500)
				}
				console.log(res,'修改昵称')
			}
		}
	}
</script>

<style scoped lang="scss">
	.change{
		width: 698rpx;
		height: 108rpx;
		background: rgba(255, 255, 255, 0);
		border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
		margin: 0 auto;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	.placeholder{
		font-size: 32rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(0, 0, 0, 0.1);
	}
	.title{
		width: 128rpx;
		height: 44rpx;
		font-size: 32rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(0, 0, 0, 0.87);
		line-height: 44rpx;
		margin-right: 24rpx;
	}
	.btn{
		width: 750rpx;
		height: 144rpx;
		background: rgba(216, 216, 216, 0);
		position: fixed;
		bottom:0;
		left: 0;
		margin-top: 108rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.btn button{
		width: 698rpx;
		height: 96rpx;
		background: #3C8EFF;
		color:	 #FFFFFF;
		
	}
</style>
